<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta name="Content-Type" content="text/html; charset=UTF-8" />
<title>File: SCSS_FOR_SASS_USERS</title>
<link rel="stylesheet" href="style.css" tppabs="http://sass-lang.com/docs/yardoc/css/style.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="common.css" tppabs="http://sass-lang.com/docs/yardoc/css/common.css" type="text/css" media="screen" charset="utf-8" />

<script type="text/javascript" charset="utf-8">
  relpath = '';
  if (relpath != '') relpath += '/';
</script>
<script type="text/javascript" charset="utf-8" src="jquery.js" tppabs="http://sass-lang.com/docs/yardoc/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="app.js" tppabs="http://sass-lang.com/docs/yardoc/js/app.js"></script>

  </head>
  <body>
    <script type="text/javascript" charset="utf-8">
      if (window.top.frames.main) document.body.className = 'frames';
    </script>
    
    <div id="header">
      <div id="menu">
  
    <a href="_index.html" tppabs="http://sass-lang.com/docs/yardoc/_index.html" title="Index">Index</a> &raquo; 
    <span class="title">File: SCSS_FOR_SASS_USERS</span>
  
  
  <div class="noframes"><span class="title">(</span><a href="..htm" tppabs="http://sass-lang.com/docs/yardoc/." target="_top">no frames</a><span class="title">)</span></div>
</div>

      <div id="search">
  <a id="class_list_link" href="#">Class List</a>
  <a id="method_list_link" href="#">Method List</a>
  <a id ="file_list_link" href="#">File List</a>
</div>

      <div class="clear"></div>
    </div>
    
    <iframe id="search_frame"></iframe>
    
    <div id="content"><div id='filecontents'><h1 id='intro_to_scss_for_sass_users'>Intro to SCSS for Sass Users</h1>

<p>Sass 3 introduces a new syntax known as SCSS which is fully compatible with the syntax of CSS3, while still supporting the full power of Sass. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as <a href="javascript:if(confirm(%27http://msdn.microsoft.com/en-us/library/ms533754%28VS.85%29.aspx  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://msdn.microsoft.com/en-us/library/ms533754%28VS.85%29.aspx%27" tppabs="http://msdn.microsoft.com/en-us/library/ms533754%28VS.85%29.aspx">IE&#8217;s old <code>filter</code> syntax</a>.</p>

<p>Since SCSS is a CSS extension, everything that works in CSS works in SCSS. This means that for a Sass user to understand it, they need only understand how the Sass extensions work. Most of these, such as variables, parent references, and directives work the same; the only difference is that SCSS requires semicolons and brackets instead of newlines and indentation. For example, a simple rule in Sass:</p>

<pre class="code">#sidebar
  width: 30%
  background-color: #faa</pre>

<p>could be converted to SCSS just by adding brackets and semicolons:</p>

<pre class="code">#sidebar {
  width: 30%;
  background-color: #faa;
}</pre>

<p>In addition, SCSS is completely whitespace-insensitive. That means the above could also be written as:</p>

<pre class="code">#sidebar {width: 30%; background-color: #faa}</pre>

<p>There are some differences that are slightly more complicated. These are detailed below. Note, though, that SCSS uses all the <a href="file.SASS_CHANGELOG.html#3-0-0-syntax-changes" tppabs="http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#3-0-0-syntax-changes" title="syntax changes in Sass 3">syntax changes in Sass 3</a>, so make sure you understand those before going forward.</p>

<h2 id='nested_selectors'>Nested Selectors</h2>

<p>To nest selectors, simply define a new ruleset inside an existing ruleset:</p>

<pre class="code">#sidebar {
  a { text-decoration: none; }
}</pre>

<p>Of course, white space is insignificant and the last trailing semicolon is optional so you can also do it like this:</p>

<pre class="code">#sidebar { a { text-decoration: none } }</pre>

<h2 id='nested_properties'>Nested Properties</h2>

<p>To nest properties, simply create a new property set after an existing property&#8217;s colon:</p>

<pre class="code">#footer {
  border: {
    width: 1px;
    color: #ccc;
    style: solid;
  }
}</pre>

<p>This compiles to:</p>

<pre class="code">#footer {
  border-width: 1px;
  border-color: #cccccc;
  border-style: solid; }</pre>

<h2 id='mixins'>Mixins</h2>

<p>A mixin is declared with the <code>@mixin</code> directive:</p>

<pre class="code">@mixin rounded($amount) {
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
  border-radius: $amount;
}</pre>

<p>A mixin is used with the <code>@include</code> directive:</p>

<pre class="code">.box {
  border: 3px solid #777;
  @include rounded(0.5em);
}</pre>

<p>This syntax is also available in the indented syntax, although the old <code>=</code> and <code>+</code> syntax still works.</p>

<p>This is rather verbose compared to the <code>=</code> and <code>+</code> characters used in Sass syntax. This is because the SCSS format is designed for CSS compatibility rather than conciseness, and creating new syntax when the CSS directive syntax already exists adds new syntax needlessly and could create incompatibilities with future versions of CSS.</p>

<h2 id='comments'>Comments</h2>

<p>Like Sass, SCSS supports both comments that are preserved in the CSS output and comments that aren&#8217;t. However, SCSS&#8217;s comments are significantly more flexible. It supports standard multiline CSS comments with <code>/* */</code>, which are preserved where possible in the output. These comments can have whatever formatting you like; Sass will do its best to format them nicely.</p>

<p>SCSS also uses <code>//</code> for comments that are thrown away, like Sass. Unlike Sass, though, <code>//</code> comments in SCSS may appear anywhere and last only until the end of the line.</p>

<p>For example:</p>

<pre class="code">/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won&#39;t appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }</pre>

<p>is compiled to:</p>

<pre class="code">/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }</pre>

<h2 id='id27'><code>@import</code></h2>

<p>The <code>@import</code> directive in SCSS functions just like that in Sass, except that it takes a quoted string to import. For example, this Sass:</p>

<pre class="code">@import themes/dark
@import font.sass</pre>

<p>would be this SCSS:</p>

<pre class="code">@import &quot;themes/dark&quot;;
@import &quot;font.sass&quot;;</pre></div></div>
    
    <div id="footer">
  Generated on Fri Mar  8 20:33:29 2013 by 
  <a href="javascript:if(confirm(%27http://yardoc.org/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://yardoc.org/%27" tppabs="http://yardoc.org/" title="Yay! A Ruby Documentation Tool">yard</a>
  0.5.3 (ruby-1.8.7).
</div>


  <script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script type="text/javascript">
  try {
  var pageTracker = _gat._getTracker("UA-535380-8");
  pageTracker._trackPageview();
  } catch(err) {}</script>


  </body>
</html>